			<section id="top-image">
				<section id="list-city" class="scroll">
					<ul class="city">
					<?php foreach($kota->result_array() as $row){?>					
						<li>
						<a href="javascript:void(0)" onClick="toMarker(<?php echo $row['lat']?>,<?php echo $row['lng']?>,'<?php echo $row['permalink']?>')">
							<span class="icon"><img alt='' src='<?php echo base_url()?>template/css/images/city-32.png' width="28px"/></span>
							<h4><?php echo $row['nama']?></h4>
							<div id="<?php echo $row['permalink']?>" style="display:none">
								<?php 
								echo "<p>
									<a href=\"".base_url()."kajian/kota/".$row['permalink']."\" style=\"float:right;margin-top:10px\">Lihat Detil</a>
									<strong>$row[nama]</strong>
									<br />
									$row[total_kajian] Jadwal Kajian
									<br />
									$row[total_lokasi] Masjid dan POI lain
									<br />
									
									</p>";
								?>
							</div>
						</a>
						</li>
					<?php } ?>
					</ul>				
				</section>
				
				<!-- Google Map -->
				<section class="top-map">
					<div id="map" style="height:360px;float:center;"></div>
				</section>
				<!-- END Google Map -->
			</section>
			
			<!-- BEGIN #main -->
			<section id="main">
				
				<!-- BEGIN #bottom -->
				<section id="bottom">
			
					<!-- BEGIN .cols -->
					<section class="cols">
					
						<!-- BEGIN Column One (one_third) -->
						<section class="one_third">
						
							<!-- BEGIN Events list
								 Events each have a date, title, time and place. Time and place are stylistically optional, but
								 it looks better with them included. -->
							<a href="<?php echo base_url()?>kajian.html" class="button right">Lihat Semua</a>
							<h3 class="font-ad2">Jadwal Kajian Terdekat</h3>
							
							<ul class="events">
								<?php

								$data = $kajian['data'];
								//echo '<pre>'.var_dump($data).'</pre>';
								$count=0;
								$break = false;
								for($day=0; $day<=30; $day++){
									$date =  date('Y-m-d',mktime(0, 0, 0, date("m")  , date("d")+$day, date("Y")));
									$dayofweek = date('N',mktime(0, 0, 0, date("m")  , date("d")+$day, date("Y")));
									
									if($break)
										break;
										
									if(isset($data[$dayofweek])){
										foreach($data[$dayofweek] as $row){
											$cek = true;
											
											if($count == 4){
												$break = true;
												break;
											}
											if($row['jns_kajian_id'] != 1 && $row['tanggal_mulai'] != $date)
												$cek = false;
											
											if($cek){
												$count++;
										
								?>
								<li>
									<span class="item-date"><?php echo date('M',strtotime($date))?> <span><?php echo date('d',strtotime($date))?></span></span>
									<h4><a href="<?php echo base_url().'kajian/'.$row['permalink']?>.html"><?php echo $row['judul']?></a></h4>
									<p><em>Tema:</em><?php echo $row['tema']?></p>
									<p><em>Pemateri:</em><?php echo $row['nama_pemateri']?></p>
									<p><em>Waktu:</em><?php echo $row['jam_mulai']?></p>
									<p><em>Tempat:</em><?php echo $row['nama_lokasi'].', '.$row['kota']?></p>
								</li>
								<?php 
											}
										}
									}
								} 
								?>
							</ul>
							<!-- END Events List -->
							
						</section>
						<!-- END Column One (one_third) -->
						
						<!-- BEGIN Column Three (one_third) -->
						<section class="one_third">
							<a href="#" class="button right">Lihat Semua</a>
							<h3 class="font-ad2">Aktivitas Anggota</h3>
		
							<ul class="media">
								<?php foreach($activity->result_array() as $row){?>
								<li >
									<span class="icon"><img src='<?php echo base_url()?>images/profile/<?php echo $row['profile_image']?>' height="32" width="32" /></span>
									<h4><a href="#"><?php echo $row['nama_user']?></a></h4>
									<p><?php echo nl2br($row['text'])?></p>
								</li>
								<?php } ?>
							</ul>
							
						</section>
						<!-- END Column Three (one_third) -->
						
						<!-- BEGIN Column Two (one_third) -->
						<section class="one_third last grid_4" >
							<h3 class="font-ad2">Daftar GRATIS !</h3>
							<div class="success" style="display:none">Success</div>
							<div class="error" style="display:none">Error</div>
							<form id="form" action="<?php echo base_url()."home/daftar"?>" class="styled" method="post" >	
								<label for="tempat">Nama Lengkap</label>
								<input class="textbox validate[required]" type="text"  id="nama" name="data[nama]" />
								
								<label for="tempat">Username</label>
								<input class="textbox validate[required]" type="text"  id="username" name="data[username]" />
								
								<label for="tempat">Email</label>
								<input class="textbox validate[required, custom[email]]" type="text"  id="email" name="data[email]" />
								
								<label for="tempat">Password</label>
								<input class="textbox validate[required]" type="password"  id="password" name="data[password]" />
								
								<label for="tempat">Jenis Kelamin</label>
								<select class="textbox" id="jns" name="data[jenis_kelamin]">
									<option value="L" >Laki-Laki</option>
									<option value="P" >Perempuan</option>
								</select>
								
								<input type="submit" value="DAFTAR" class="button" />
							</form>							
						</section>
						<!-- END Column Two (one_third) -->
								
					</section>
					<!-- END .cols -->
					
					<!-- BEGIN .social-bar -->
					<section class="social-bar">
						<a href="http://facebook.com/" class="facebook">Like us on Facebook!</a>
						<a href="http://twitter.com/justinscheetz/" class="twitter">Follow us on Twitter!</a>
						<a href="#" class="feed">Subscribe to our Feed!</a>
					</section>
					<!-- END .social-bar -->
					
				</section>
				<!-- END #bottom -->
			
			</section>
			<!-- END #main -->
			
			<script>
			
			$(document).ready(function(){
				$("#form").validationEngine();

				$("#form").submit(function(){
					if($(this).validationEngine('validate')){
						var formInput = $(this).serialize();
						
						$.ajax({
							url: $(this).attr('action'),
							data: formInput,
							beforeSend : function(){
								$.fancybox.showActivity();
								$(".error").hide();
							},
							success: function(respon){
								var obj = jQuery.parseJSON(respon);
								if(obj.status == 'success'){
									$(".success").text(obj.msg);
									$(".success").fadeIn(1000);
								}else{
									$(".error").text(obj.msg);
									$(".error").fadeIn(1000);
								}
								
								$.fancybox.hideActivity();
							},
							type: "POST"
						});
					}
					return false;
				});
				setTimeout(function(){

					$("#map").gmap3({
							action:'init',
							options:{	
								center: [-3, 117], 
								zoom: 5				
							}
						},
						
						{	
							action: 'addMarkers',
							markers:[
							  <?php foreach($kota->result_array() as $row){
								echo "{lat:$row[lat], lng:$row[lng], data:'<p><strong>$row[nama]</strong><br />$row[total_kajian] Jadwal Kajian<br />$row[total_lokasi] Masjid dan POI lain</p>'}, \n";
							  }
							  ?>				
							],
							marker:{
								options:{
									draggable: false,
									animation: google.maps.Animation.DROP,
									icon:"<?php echo base_url()?>template/css/images/bigcity.png"
								
								},
							}							
						}
					);
					
				},1000);
			});
			
			function toMarker(lat, lng, name){
				var infowindow = $("#map").gmap3({action:'get', name:'infowindow'});
				  if (infowindow){
					infowindow.close();
				  }
				  
			    $("#map").gmap3({	
					action:'panTo',
					args:[new google.maps.LatLng(lat,lng)],		
				});

				var map = $('#map').gmap3('get');
				map.setZoom(map.getZoom());
				
				$('#map').gmap3({
					action: 'addInfoWindow',      
					lat:lat,
					lng:lng,
        	
					infowindow:{
						options:{	
							content: $("#"+name).html()						
						},
						
						events:{
						closeclick: function(infowindow){
							}	
						},
					}},
					{action: 'setOptions', args:[{scrollwheel:true}]}
				);
			}
			</script>